<template>
  <div class="component-addcontract">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>虚拟合同
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
      <!-- 中间部分 -->
      <div class="component-main">
        <div class="component-main-left">
          <div class="box1">
            <span class="iconfont">&#xe67e;</span>
            <span>基本信息</span>
            <div class="arrow"></div>
          </div>
        </div>

        <!-- 表单部分 -->
        <div class="component-main-right">
          <div class="box">
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
              :inline="true"
            >
              <el-form-item label="所属框架合同：" prop="userTruename" label-width="150px">
                <el-select
                  v-model="ruleForm.userTruename"
                  placeholder="全部"
                  style="width:300px"
                >
                  <el-option
                    v-for="(item, index) in nameLists"
                    :key="index"
                    :value="item.conId+'/'+item.conOuterno"
                    :label="item.conName"
                  ></el-option>
                </el-select>
              </el-form-item>

              <el-form-item label="虚拟合同名称：" prop="userOrg1" label-width="150px">
                <el-input style="width:300px" v-model="ruleForm.userOrg1" clearable></el-input>
              </el-form-item>

              <el-form-item label="虚拟合同编号：" prop="userOrg" label-width="150px">
                <el-input v-if="ruleForm.userTruename.split('/')[1]==undefined" style="width:300px" v-model="ruleForm.userTruename+'-001'" disabled clearable></el-input>
                <el-input v-else style="width:300px" v-model="ruleForm.userOrg=ruleForm.userTruename.split('/')[1]+'-001'" disabled clearable></el-input>
              </el-form-item>

              <el-form-item style="margin-left: 100px;">
                <el-button type="primary" @click="submitForm('ruleForm')" style="width:180px">提交</el-button>
              </el-form-item>

            </el-form>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "subContract",
    data() {
      return {
        nameLists: [],
        ruleForm: {
          userOrg: "",
          userOrg1: "",
          userTruename: "",
        },
        rules: {
          userOrg: [
            {
              required: true,
              message: "请输入虚拟合同编号",
              trigger: "blur"
            },
            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }

          ],
          userOrg1: [
            {
              required: true,
              message: "请输入虚拟合同编号",
              trigger: "blur"
            },
            { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }

          ],
          userTruename:[
            {required: true, message: "请选择所属框架合同",trigger: "change"},
          ],
        },
        newArray:{}
      };
    },
    created() {

    },
    mounted(){
      this.contractList();
    },
    methods: {
      // 获取框架合同
      contractList(){
        let suCb = res => {
          this.nameLists = res.data.data
          console.log(res.data.data);
        }
        let erCb = res => {
          console.log(res);
        }
        let params = {type:'X'};
        let req = {
          url: "/api/web/proContract/getNoByConType",
          methods: "post",
          data: params,
          success: suCb,
          error: erCb
        };
        this.$https(req);
      },

      submitForm(formName) {
        // 请求前调用赋值
        this.$refs[formName].validate(valid => {
          if (valid) {
                let that = this;
                let suCb = res => {
                  console.log(res);
                  this.$router.push({
                    name: "contractList"
                  });
                  that.$msg("提交成功！");
                };
                let erCb = res => {
                };
                let params = {
                  proContract: {
                    parentId: this.ruleForm.userTruename.split('/')[0],
                    conId:this.$route.params.conId,
                    conType: "2",//合同类型（1-框架合同、2-框架内虚拟合同、3-框架内子合同、4-单向合同5-外包合同）
                    conOuterno: that.ruleForm.userOrg,//合同外部编号
                    conName: that.ruleForm.userOrg1,//合同名字
                  }
                };
                let req = {
                  url: "/api/web/proContract/addContract",
                  methods: "post",
                  data: params,
                  success: suCb,
                  error: erCb
                };
                that.$https(req);
          } else {
            this.$erMsg("请按红色字的提示进行修改完善")
            return false;
          }
        });
      }
    }
  };
</script>

<style scoped>
  .component-main {
    width: 1102px;
    /* height: 1400px; */
    margin: 0 auto;
    margin-top: 49px;
    background-color: #fff;
    border: 1px solid #e4e4e4;
    border-top: none;
  }

  .component-main-left {
    width: 180px;
    height: 500px;
    border: 1px solid #e4e4e4;
    padding-top: 50px;
    float: left;
    border-top: none;
  }

  .box1 {
    position: relative;
    width: 175px;
    height: 50px;
    text-align: left;
    line-height: 50px;
    background-color: #9ea7b4;
    color: #fff;
    padding-left: 5px;
  }

  .box1 .arrow {
    position: absolute;
    width: 0;
    height: 0;
    top: -40px;
    left: 180px;
    border-width: 25px 0 25px 25px;
    border-style: solid;
    border-color: transparent transparent transparent #9ea7b4;
    /*透明 透明 透明 灰*/
    margin: 40px auto;
  }

  /* 表单部分 */

  .component-main-right {
    height: 449px;
    float: right;
    width: 918px;
    margin: 0 auto;
    border-top: none;
    padding-top: 100px;
    border-bottom: 1px solid #e4e4e4;

    border-right: 1px solid #e4e4e4;
  }

  .box {
    width: 500px;
    margin: 0 auto;
  }

  .box .el-button--primary {
    color: #fff;
    background-color: #1abc9c;
    border-color: #1abc9c;
  }

  .box .el-form-item {
    width: 450px;
  }

  .el-form-item .el-form-item__label {
    width: 110px;
  }

  .el-form-item__content {
    margin-left: -103px;
  }

  .one {
    display: inline-block;
    width: 164px;
    height: 40px;
    background-color: #f2f2f2;
    border: 1px solid #e4e4e4;
  }

  .main-input {
    width: 90px;
    height: 40px;
    border: 1px solid #e4e4e4;
    margin-left: -4px;
    border-left: none;
  }

  .two {
    display: inline-block;
    width: 50px;
    height: 40px;
    background-color: #f2f2f2;
    border: 1px solid #e4e4e4;
    border-left: none;
    margin-left: -4px;
  }
</style>
